// 1、导入包
import React from 'react';

import ReactDOM from 'react-dom';

// import '../practice/theSecond-component'
// 导入class继承
// import '../practice/person'

// class创建关键字组件
class Movie extends React.Component{
    constructor(){
        // 由于Movie组件，继承了React.Component这个父类，所以，自定义构造器中必须使用super
        super()
        // 只有调用了super之后才能使用this
        this.state={
            // react中的this.state={}相当于Vue中的data(){return {}}
            msg:'this is my Movie component'
        }
    }
    // render函数时渲染当前组件的虚拟DOM
    render(){
        this.state.msg="00"
        // 由此可知在this.state创建的数据是可读可写的
        // 注意：在class内部，this表示当前的组件的实例对象
        return <h1>
            这是我们的h1组件{this.props.name}--{this.props.age}--{this.state.msg}
        </h1>
    }

}
// 如果不做单单独配置的话.jsx不能省略
// import Hello from '@/component/Hello' 
// import { from } from '_array-flatten@2.1.2@array-flatten';
// 第一种创建组件
const dog={
    name:'dahuang',
    age:2,
    gender:'公'
}
// 注意：不管是vue还是react，值都是只读的
ReactDOM.render(<div>
    {/*直接把组件以标签的形式放在页面上即可  组件名称第一个字母大写，要不然会被当做标签渲染*/}
    {/* <Hello {...dog}></Hello> */}
    123
    {/* 这里是Movie标签，其实是一个实例的对象 */}
    <Movie name={dog.name} age={dog.age}></Movie>
</div>, document.getElementById('app')) ;




// 对比两种创建组件的方式，一种是function(无状态组件)，另外一种是class创建(有状态组件)
// class创建的组件有自己的私有数据(this.state)还有生命周期函数，但是使用function创建的组件只有props，
//没有自己的私有数据和生命周期函数
// 得出：有状态组件和无状态组件的本质区别在于：有误state属性和有无生命周期函数
// 从运行效率上分析：有状态的组建的运行效率会低于无状态组件的

// 组件中data/state和props之间的区别：
// props是通过外界传入的，但是state是自己的组件私有的(通过ajax获取回来的数据都是私有的)
// props中数据只读的形式，但是state的数据是可以进行读写的
